<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
    <h2 align="center">My Orders</h2>
    <style type="text/css">

        table {
            width: 700px;
            padding: 0;
            margin: 0 auto;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: bold 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #d5eaca no-repeat;
        }

        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            font-size:16px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }

    </style>
    <table>
        <tr>
            <th>Order ID</th>
            <th>Date</th>
            <th>Total Price</th>
        </tr>
            <tr th:each="order : ${orderList}">
                <td>
                    <a th:href="${'/order/viewOrderDetail?orderId='}+${order.orderId}" name="orderId" th:value="${order.orderId}">
                        <th:block th:text="${order.orderId}" />
                       </a></td>
                <td>  <th:block th:text="${order.orderDate}" />
                    </td>
                <td>  <th:block th:text="${order.totalPrice}" />
                   </td>
            </tr>
    </table>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>